<template>
	<view class="" v-if="loading">
		<!-- <view class="header" :style="{backgroundColor:`rgba(231, 231, 231,${transparency})`}">
			<view class="flex">
				<view class="nav">
					<view class="navitem" v-for="(item,index) in nav_list" @click="changNavId(item)" :style="{color:nav_id!=item.id ? `rgba(25, 25, 25,${transparency})` 
					: `rgba(241, 0, 0,${transparency})`  }">
						{{item.text}}
					</view>
				</view>

			</view>
		</view> -->
		<scroll-view scroll-y=true style="height: 100vh;" @scroll="scroll" :scroll-top="scrollTop"
			:scroll-into-view="scrollId" scroll-with-animation="true">
			<!-- 商品 -->
			<view class="commodity">
				<swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#ff0000" circular
					indicator-dots="true">
					<swiper-item v-for="(item,index) in list">
						<image :src="item" mode=""></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 评价 -->
			<!-- <view class="evaluate box" :id="'scrollView'+nav_list[0].id">
				<view class="title">
					评价
				</view>
			</view> -->
			<!-- 详情 -->
			<view class="details box" :id="'scrollView'+nav_list[1].id">
				<view class="title">
					<text>
						{{productInfo.name}}
					</text>
					<u-icon name="star" color="#2979ff" size="40" @click="collection(1)"
						v-if="!collectionStatus"></u-icon>
					<u-icon name="star" color="red" size="40" @click="collection(1)" v-if="collectionStatus"></u-icon>
				</view>
				<view class="price">
					<text class="price-tip">
						￥
					</text>
					<text>
						{{productInfo.price}}
					</text>
				</view>
				<view class="inventory">
					<!-- <text>销量：{{productInfo.paynum}}</text> -->
					<text>库存：{{12}}</text>
					<!-- <text>浏览量：{{productInfo.browse}}</text> -->
				</view>
			</view>
			<view class="box" @click="show=true" v-if="productInfo.status">
				<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
					<text>规格属性</text>
					<text style="color: #e54d42;">已选：{{choiceItem.attributeList}}</text>
				</view>
			</view>
			<view class="box">
				<u-divider text="分割线" :dot="true">图文详情</u-divider>
				<view class="u-content" style="margin-top: 20rpx;">
					<u-parse :html="productInfo.details"></u-parse>
				</view>
			</view>
			<!-- <view class="footer">
				<view class="" @click="getback(1)">
					<view class="footer-text">
						<u-icon name="home" size="30"></u-icon>
						<view class="">首页</view>
					</view>
				</view>
				<view class="">
					<view class="footer-text" @click="getback(2)">
						<u-icon name="shopping-cart" size="30"></u-icon>
						<view class="">购物车</view>
					</view>
				</view>
				<view class="">
					<view class="footer-text">
						<u-icon name="share" size="30"></u-icon>
						<view class="">分享</view>
					</view>
				</view>
				<view class="">
					<u-button shape="circle" text="按钮形状" @click="open(1)">加入购物车</u-button>
				</view>
				<view class="">
					<u-button type="success" shape="circle" text="按钮形状">立即购买</u-button>
				</view>
			</view> -->
			<view class="goods-carts">
				<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="getback"
					@buttonClick="open" />
			</view>
		</scroll-view>
		<u-popup :value="show" mode="bottom" @close="close" @open="open" :borderRadius="20" :safeAreaInsetBottom="true">
			<view class="popup">
				<view class="box" style="margin-bottom: 40rpx;">
					<view class="" style="margin-bottom: 20rpx;display: flex;align-items: center;">
						<u-image :showLoading="true" :src="list[0]" width="120rpx" height="120rpx"
							:borderRadius="10"></u-image>
						<!-- <image :src="list[0]" mode="" width="40rpx" height="40rpx"></image> -->
						<view class="">
							{{productInfo.name}}
						</view>
						<view class="" style="margin-left: 20rpx;color: #e54d42;">
							<text>￥</text>
							<text style="font-size: 50rpx;">{{choiceItem.retailPrice}}</text>
						</view>
					</view>
				</view>
				<view class="box">
					<text style="margin-bottom: 20rpx;">规格</text>
					<view class="" style="margin-top: 20rpx;">
						<u-tag v-for="v in productInfo.list" :text="v.attributeList"
							:type="v.id==choiceItem.id?'primary':'warning'" @click="choice(v)"></u-tag>
					</view>
					<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<text>数量</text>
						<u-number-box v-model="productNum">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 50px;text-align: center;"
								class="input">{{productNum}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
				<view class="cu-btn bg-red round Mainbtn" style="width: 100%;" @click="confim()">确定</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				options: [{
						icon: 'chat',
						text: '首页'
					},
					{
						icon: 'cart',
						text: '购物车',
					},
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				list: [{
						src: "https://picnew12.photophoto.cn/20180731/taobaohufupinlunboxuanchuanhaibao-30671462_1.jpg",
					},
					{
						src: "https://img1.baidu.com/it/u=3164785196,1911343538&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500",
					},
					{
						src: "https://img.zcool.cn/community/015beb5c212a71a80121df908e99ac.jpg?x-oss-process=image/resize,h_600/format,jpg",
					},
					{
						src: "https://img.zcool.cn/community/013add5779dc220000012e7e96dc60.jpg@2o.jpg",
					}

				],
				statusbarHeight: uni.getSystemInfoSync().statusBarHeight, //刘海屏高度
				scrollTop: 0, //设置竖向滚动条位置
				nav_list: [{
						id: 1,
						text: '评价',
						scrollId: "scrollView1"
					},
					{
						id: 2,
						text: '详情',
						scrollId: "scrollView2"
					},
					{
						id: 3,
						text: '推荐',
						scrollId: "scrollView3"
					}
				],
				nav_id: null, //导航选中id
				scrollId: "",
				transparency: 0, //透明度
				isDropDown: false, //下拉到临界点
				//临界值(图片高度-头部高度-刘海屏高度 250-50-刘海屏高度) 
				criticalValue: 200 - uni.getSystemInfoSync().statusBarHeight,
				ProductId: '',
				productInfo: {},
				productNum: 1,
				choiceItem: {},
				type: 0,
				collectionStatus: false,
				loading: false
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.collection(0)
				this.IsEnHistory()
			}
		},
		onLoad(e) {
			if (!e.id) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			this.ProductId = e.id ? e.id : ''
			this.getDatas()
			

		},
		onPullDownRefresh() {
			this.getDatas()
		},
		methods: {
			getDatas() {
				this.$ajax.getproductInfo({
					ProductId: this.ProductId
				}).then(res => {
					this.productInfo = res.data
					this.loading = true
					this.list = res.data.image.split(',')
					this.choiceItem = res.data.list[0]
					uni.stopPullDownRefresh()
				})

			},
			//scroll-view滚动触发
			scroll(e) {
				const scrollTop = e.detail.scrollTop
				this.calcSize()
				const tabs = this.nav_list.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.nav_id = tabs[0].id;
				}
				this.transparency = e.detail.scrollTop / this.criticalValue
				if (!this.isDropDown && e.detail.scrollTop >= this.criticalValue) {
					this.isDropDown = true
				} else if (this.isDropDown && e.detail.scrollTop < this.criticalValue) {
					this.isDropDown = false
					this.nav_id = null
				}
			},
			//计算高度
			calcSize(event) {
				let h = 0;
				this.nav_list.forEach(item => {
					let view = uni.createSelectorQuery().select(`#${item.scrollId}`);
					view.fields({
						size: true
					}, data => {
						if (data != null) {
							//加上图片高度 -(header+刘海屏)高度 +margin高度
							item.top = h + 250 - 50 - uni.getSystemInfoSync().statusBarHeight + 10 * item
								.id;
							h += data.height
							item.bottom = h;
						}

					}).exec();
				})

			},
			// 获取收藏状态
			IsEnHistory() {
				this.$ajax.IsEnHistory({
					ProductId: this.ProductId
				}).then(res => {
					this.collectionStatus = res.data
				})
			},
			//点击头部标题
			changNavId(item) {
				if (!this.isDropDown) return
				this.nav_id = item.id
				//scroll-into-view滚动到指定view会有头部高度的误差 用scroll-top来取代
				// this.scrollId = item.scrollId
				this.nav_list.forEach(n => {
					if (n.id == item.id) {
						this.scrollTop = String(item.top)
					}

				})
			},
			//返回
			getback(type) {
				if (type.index == 0) {
					uni.navigateBack()
				} else if (type.index == 1) {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			//分享
			share() {
				uni.showToast({
					title: '分享',
					icon: 'none',
					duration: 2000
				})
			},
			open(type) {
				this.show = true
				if (type && type.index >= 0) {
					this.type = type.index
				}
			},
			close() {
				this.show = false
			},
			// 选择
			choice(val) {
				this.choiceItem = val
			},
			// 收藏/足迹
			collection(Mold) {
				if (uni.getStorageSync('token')) {
					let that = this
					this.$ajax.InsertHistory({
						ProductId: that.ProductId,
						Mold
					}).then(res => {
						this.IsEnHistory()
					})
				} else {
					uni.navigateTo({
						url: "/pages/home/login/login"
					})
				}

			},
			// 添加购物车
			InsertShoppingCart() {
				let that = this
				let data = {
					id: '00000000-0000-0000-0000-000000000000',
					productNo: that.productInfo.productNo,
					productName: that.productInfo.name,
					image: that.productInfo.image,
					barcode: that.choiceItem.barcode,
					attributeList: that.choiceItem.attributeList,
					price: that.choiceItem.retailPrice * that.productNum,
					num: that.productNum
				}
				this.$ajax.InsertShoppingCart(data).then(res => {
					uni.showToast({
						title: '添加成功',
						icon: 'none',
						duration: 2000
					})
					this.show = false
				})
			},
			// 确定按钮
			confim() {
				if (this.productNum <= 0) {
					uni.showToast({
						title: '请选择数量',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				if (!this.type) {
					this.InsertShoppingCart()
				} else {
					this.AddOrder()
				}
			},
			// 下单
			AddOrder() {
				let that = this
				let data = {
					memberId: uni.getStorageSync('userInfo').id,
					body: that.productInfo.name,
					paymold: '1',
					paytype: '1',
					payamount: that.productNum * that.choiceItem.retailPrice,
					pay: 'Applet',
					state: false,
					list: [{
						productNo: that.productInfo.productNo,
						productName: that.productInfo.name,
						image: that.productInfo.image,
						barcode: that.choiceItem.barcode,
						attributeList: that.choiceItem.attributeList,
						price: that.choiceItem.retailPrice,
						num: that.productNum
					}]
				}
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '当前暂未登录,点击确定前往登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/home/login/login'
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: `/pages/order/submitOrder/submitOrder?val=${JSON.stringify(data)}`
					})
				}
				this.show = false
				// console.log(this.choiceItem);
				// return


				// this.$ajax.AddOrder(data).then(res=>{
				// 	uni.navigateTo({
				// 		url:`/pages/order/submitOrder/submitOrder?id=${res.data.list}`
				// 	})
				// })
			}
		}

	}
</script>
<style>
	page {
		background-color: #e7e7e7;
	}
</style>
<style lang="scss" scoped>
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

		.flex {
			align-items: center;
			display: flex;
			justify-content: center;
			padding: 0 20rpx;
			width: 100%;
		}

		.nav {
			display: flex;
			justify-content: center;
			align-items: center;

			.navitem {
				margin-left: 30px;
				font-size: 30rpx;
			}

			.navitem:first-child {
				margin-left: 0;
			}
		}

		.round {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			width: 70rpx;
			height: 70rpx;
		}
	}

	.commodity {
		width: 100%;
		height: 500rpx;

		.swiper {
			width: 100%;
			height: 500rpx;
		}

		image {
			width: 100%;
			height: 500rpx;
		}
	}

	.box {
		margin: 20rpx 0;
		width: calc(100% - 20rpx);
		margin-left: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.details {
		.title {
			font-size: 32rpx;
			color: #303133;
			display: flex;
			justify-content: space-between;
		}

		.price {
			font-size: 34rpx;
			padding: 10rpx 0;
			color: #fa436a;

			.price-tip {
				font-size: 24rpx;
			}
		}

		.inventory {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #909399;
		}

	}

	.popup {
		background-color: #e2e7f0;
		padding: 10rpx;
	}

	.footer {
		width: 100%;
		background-color: white;
		padding: 20rpx 20rpx;
		padding-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;

		.footer-text {
			text-align: center;
		}
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.uni-tab__cart-box {
		padding: 30rpx;
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
	
</style>